<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="main">
			<view class="name">esp32-01摄像头画面</view>
			<!-- <image src="http://43.142.101.253:5000/stream"></image> -->
			<image src="http://192.168.1.15:5000/stream"></image>
			<!-- <image src="http://192.168.43.142:5000/stream"></image> -->
		</view>
		<view class="setting">
			<view class="uni-padding-wrap uni-common-mt">
				<text>图像质量</text>
				<view>
					<slider show-value="true" min="10" max="63" value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
				</view>
			</view>
			
			
		</view>
		<view class="btn_area">
			<button class="up" @click="move('up')">up</button>
			<view class="lr">
				<button class="left" @click="move('left')">left</button>
				<button class="right" @click="move('right')">right</button>
			</view>
			<button class="down" @click="move('down')">down</button>
			<button ref="flashbutton" class="flash" @click="flash()">闪灯</button>
		</view>
		<view class="record">
			<button class="record_btn" @click="record()">录像</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'esp32cam实时网络摄像头'
			}
		},
		onLoad() {

		},
		methods: {
			flash(){
				uni.request({
					// url:this.base_url+'/flash',
					url:'http://192.168.1.15:5000/flash',
					// url:'http://43.142.101.253:5000/flash',
					success: (res) => {
						console.log(res)
					}
				})
			},
			move(param){
				console.log(param)
				uni.request({
					// url:this.base_url+'/flash',
					url:'http://192.168.1.15:5000/move?direct='+param,
					// url:'http://43.142.101.253:5000/move?direct='+param,
					success: (res) => {
						console.log(res)
					}
				})
			},
			record(){
				uni.request({
					// url:this.base_url+'/flash',
					url:'http://192.168.1.15:5000/record',
					// url:'http://43.142.101.253:5000/record',
					success: (res) => {
						console.log(res)
					}
				})
			},
			// async flash(){
			// 	await uni.request({
			// 		url: this.global_url+'/hotdish', 
			// 		data: {
			// 		},
			// 		success: (res) => {
			// 			this.hotDish=res.data
			// 		},
			// 		fail: (res) => {
			// 			console.log(this.global_url+'/hotdish')
			// 		}
			// 	});
			// },
			sliderChange(event){
				var num=event.detail.value
				console.log(num)
				uni.request({
					url:'http://192.168.1.15:5000/set/quality?value='+num,
					success: (res) => {
						console.log(res)
					}
				})
				
			}
		}
	}
</script>

<style>
	.content {

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.btn_area{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		
	}
	.lr{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.setting{
		
	}
	.style{
		display: flex;
		flex-direction: row;
	}

	
</style>
